<template lang="jade">
el-card(v-loading="loading",class="box-card")
    div( slot="header",class="clearfix")
        router-link(class="btn btn-primary btn-mini",to="/product-type")
            i(class="el-icon-plus") 新建产品分类
    div(class="panel panel-default")
        div(class="panel-heading") 产品分类列表
        div(class="panel-body")
            div(class="product-type-list-cotaniner")
                el-table(:data="paged.items",stripe)
                    el-table-column(type="selection")
                    el-table-column(prop="name",label="分类名称")
                    el-table-column(width="50px",align="center")
                        template(slot-scope="scope")
                            router-link(:to="'/product-type/'+scope.row.id")
                                i(class="el-icon-edit")
                    el-table-column(width="50px",align="center")
                        template(slot-scope="scope")
                            a(href="javascript:void(0);",class="text-danger",@click="delete_confirm(scope.row)")
                                i(class="el-icon-delete")
                            
    pagination(:total="paged.totalCount",v-model="page",@change="get_product_type_page")
</template>
<script>
    import Axios from 'axios';
    import {pagination,request} from 'collection';
    import AxiosExtend from '../util/axios-extend';
    import _ from 'lodash';
    import Vue from 'vue';

    export default {
        data(){
            return {
                paged:{},
                page:{skipCount:0,maxResultCount:10},
                loading:false
            }
        },

        components:{'pagination':pagination},

        methods:{
            get_product_type_page(){
                var vm = this;
                var params =  this.page;
                request.get.call(this,'/api/services/app/ProductType/GetProductTypeListPaged',params).then((res)=>{
                     vm.paged = res.data.result;
                });
            },
            
            delete_confirm(type){
                var vm = this;
                this.$confirm('确定删除这个分类吗？删除后该分类下的产品也会删除','询问',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    vm.loading=true;
                    AxiosExtend.delete('/api/services/app/productType/remove?typeId='+type.id,{}).then((res)=>{
                        vm.loading=false;
                        vm.get_product_type_page();
                    });
                }).catch(()=>{});    
            }
        },
        mounted(){
            this.get_product_type_page();
        }
    }
</script>

<style lang="scss">
    .product-type-list-cotaniner{
        margin: -15px;
    }
    body{
        background: #EAEAEA;
    }
</style>